<template>
  <div class="mine-box">
    <van-nav-bar
      title="资产挂卖"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      class="nav-bar"
    />
    <div class="buy-top">
      <h2><span>挂卖</span><i style="  display:block;
  float:left;font-style:normal;line-height:10px;letter-spacing:2px;">OBT</i></h2>
    </div>
    <div class="buy-content">
      <div class="input-box">
        <div class="buy-usdt-box" style="border-bottom:solid 1px #c5c5c7">
          
        <van-field
          class="box-input usdtNum"
          v-model.lazy="obtNum"
          autofocus @keyup='usdtChange'
          type="text" style="width:75%" 
          placeholder="请输入挂卖量"
        />
        <span style="float:right;border-right:none;">OBT</span>
        </div>

        <div class="buy-usdt-box">
          <van-field
          class="box-input usdtNum"
          v-model.lazy="usdtNum" @keyup='obtChange'
          autofocus
          type="text" style="width:75%"
        />
          <span style="float:right;border-right:none;">USDT</span>
        </div>
      </div>
       <van-field style="background-color:transparent;border:solid 1px #c5c5c7;margin-top:20px;"
          v-model="payPassword"
          :type="togglepayPassword?'text':'password'"
          placeholder="请输入支付密码"
          @click-icon="togglepayPassword=!togglepayPassword"
          class="box-input"
          >
          <img
            slot="icon"
            v-if="payPassword"
            :src="togglepayPassword?'static/img/login-visible.png':'static/img/login-invisible.png'"
            style="width: 24px;"
            />
          </van-field>
      <div class="button-box">
        <span @click="toCreate" class="submitUSDT">提交</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
  data(){
    return {
      lastPageUrl:"",
      totalNum:"",
      C2CMessage:{},
      togglepayPassword: false,
      payPassword:"",
      usdtNum:0,
      obtNum:0,
      USDTVal:0,
    }
  },
  created(){

  },
  mounted(){
    this.lastPageUrl = sessionStorage.getItem("lastAndNowPage").split('-')[1];
    sessionStorage.setItem("lastAndNowPage",this.lastPageUrl+"-/sellC2C");
    token_g = JSON.parse(sessionStorage.getItem("usermessage")).token;
    this.C2CMessage = JSON.parse(sessionStorage.getItem('c2cmessage'));
    // 获取USDT转换汇率
      let cont = {
        type:'USDT_TK'
      }
      this.$axios({
        method: 'GET',
        url: url_g + '/config/',
        params: cont,
        headers: {
          'Authorization': 'Bearer ' + token_g
        }
      }).then((res) => {
        this.USDTVal = parseFloat(res.data.results[0].value)
      }).catch((e) => {
              Toast(e.response.data.detail);
      });
  },
  methods:{
    onClickLeft(){
      this.$router.push(this.lastPageUrl)
    },
    usdtChange(){

      this.usdtNum = (this.obtNum * this.USDTVal).toFixed(2);
    },
    obtChange(){
      this.obtNum = (this.usdtNum/this.USDTVal).toFixed(2);
    },
    toCreate(){
      if(this.obtNum && parseInt(this.obtNum) > 999){
        this.$axios({
          method: 'POST',
          url: url_g + '/c2c/sell/create/',
          data: 'pay_password='+this.payPassword+'&qty='+this.obtNum,
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          if(res && res.data){
            this.$router.push(this.lastPageUrl)
          }
        }).catch((e) => {
          Toast(e.response.data.detail);
        });
      }else{
        Toast('满1000和100的整数倍可以挂卖。')
      }
      
      
    },
    comparedesc(prop){
      return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
            val1 = Number(val1);
            val2 = Number(val2);
        }
        if (val1 > val2) {
            return -1;
        } else if (val1 < val2) {
            return 1;
        } else {
            return 0;
        }
      }
    }
  }
}
</script>

<style scoped>
.submitUSDT{
  font-size:14px;
  display:block;
  float:left;
  line-height:30px;
  color:#fff;
  border:solid 1px #7595ae;
  background-color:#000;
  width:94%;
  margin-left:3%;
  height:30px;
  letter-spacing:2px;
  z-index: 999999;
}
.buy-cancel{
  float:left;
  display:block;
  width:45%;
}
.buy-confirm{
  float:right;
  display:block;
  width:45%;
}
.button-box{
  margin-top:40px;
  width:100%;
}
.buy-usdt-box{
  width:calc(100% - 20px);
  float:right;
  height:40px
}
.usdtNum{
  display:block;
  float:left;
  width:55%;
  background-color:transparent;
  border:none;
  font-size:12px;
  line-height:30px;
  color:#333;
}
.buy-usdt-box span{
  color:#212121;
  display:block;
  float:left;
  width:20%;
  height:20px;
  line-height:20px;
  margin-top:10px;
  letter-spacing:3px;
  border-right:solid 1px #c5c5c7
}
.buy-usdt-box i{
  display:block;
  float:right;
  width:22%;
  font-style:normal;
  line-height:40px;
  color:#8dadc6;
  font-size:12px;
  letter-spacing:1px;
}
.input-box{
  width:100%;
  height:80px;
  border:solid 1px #c5c5c7;
  background:url('/static/img/buyc2c_07.jpg') no-repeat 5px 30px;
}
.buy-content{
  width:90%;
  margin:20px auto;
}
.buy-top{
  padding-top:20px;
  width:100%;
  height: 145px !important;
  background: url('/static/img/game/mine-bg.jpg') no-repeat;
  background-size: cover cover;
  background-attachment: fixed;
}
.buy-top h2{
  font-size:12px;
  color:#fff;
  text-align:left;
  text-indent:10px
}
.buy-top h2 span{
  display:block;
  float:left;
  line-height:20px;
  color:#fff;
  font-size:22px;
  letter-spacing:2px;
}
.go-detail{
  width: 30px;
  color: yellow;
  height: 30px;
  float: right;
  display: block;
}
.van-list{
  height: 100vh;
  overflow-y: scroll;
}
.usdt-num-num{
  line-height:28px;
  color:#9dafbb;
  text-align:left;
  font-size:12px;
}
.usdt-num-num span{
  font-size:14px;
  color:#0a0a0a
}
.usdt-num{
  line-height:28px;
  color:#080808;
  text-align:left
}
.usdt-num span{
  margin-right:5px;
  color:#173140;
}
.user-logo{
  margin-right:10px;
  font-size:12px;
  line-height:30px;
  display:block;
  float:left;
  width:30px;
  height:30px;
  border-radius:15px;
  background-color:#6187dc;
  color:#fff;
  text-align:center;
}
.user-name{
  font-size:12px;
  line-height:30px;
   display:block;
  float:left;
  color:#1f2c35;
}
.mine-box{
  text-align: center;
  height: 100vh;
  color: #fff;
  overflow: scroll;
  background-color:#fff
}
.nav-bar {
  color: #000;
}
.circle {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  width: 100%;
  text-align: center;
}
.app-list{
  width:95%;
  margin:0px auto;
  padding-top:10px;
  height:100%;
  overflow-y:scroll;
}
p {
  margin: 0;
  font-size: 14px;
}
.rank-box {
  height: 100%;
  overflow: auto;
}
/*seciton*/
.section-item {
  background-color:#fff;
  width: 100%;
  height: 110px;
  color:#000;
  margin-bottom:10px;
}
.section-item h2{
  margin:0px;
  height:40px;
  text-align:left;
  border-bottom:solid 1px #dedede;
  padding-top:10px;
}
.section-item-title {
  font-weight: bold;
  line-height: 24px;
  font-size: 14px;
}
.section-item-desc {
  color: #777;
  line-height: 20px;
  font-size: 12px;
}
.section-item-label {
  margin-top: 5px;
}
.section-item-label span {
  padding: 2px 6px;
  border: 1px solid orange;
  border-radius: 15px;
  color: orange;
  font-size:12px;
  font-size:9.6px;
  -webkit-transform: scale(0.80);
}
.section-btn {
  border: 1px solid #529ec2;
  color: #529ec2;
  padding: 3px 14px;
  font-size: 12px;
  border-radius: 15px;
  line-height: 12px;
  height: 24px;
}
.section-item-index {
  text-align: center;
}
.section-item-left {
  padding: 5px;
  width:75px;
  margin-right:10px
}
.section-item-middle{
  width:200px;
}
.section-img {
  overflow: hidden;
  width: 65px;
  height: 65px;
  padding: 5px;
}
.section-img img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  box-shadow: 0px 2px 10px #dadada;
}
.section-item-right{
  width:80px;
}
.section-item-right button{
  width:100%;
  display:block;
}
.section-item-right button span{
  width:100%;
  display:block;
}
/*seciton  over*/
</style>
